<script setup>
import { ref ,onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user.js'
import { showToast } from 'vant';
import mori from '@/assets/mori.png'
const router = useRouter()
const active = ref(0)
const showShare = ref(false)
const list = ref(['最近', '文章', '视频', '动态'])
const loginRef = ref(null)
const topRef = ref(null)
const midRef = ref(null)
const imgRef = ref(null)
const options = [
       [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];
function scrollFn() {
    if (loginRef.value.scrollTop >= 190) {
        topRef.value.style.backgroundColor = '#192028'
        midRef.value.style.position = "fixed"
        midRef.value.style.top = "55px"
        imgRef.value.hidden = false
    } else {
        topRef.value.style.background = 'none'
        midRef.value.style.position = "relative"
        midRef.value.style.top = "0"
        imgRef.value.hidden = true
    }
}

function onClickTab({ title }) {
    if(title == '最近') {
       router.push({name:'recent'})
    } else if (title == '文章') {
        router.push({name:'myArticle'})
    } else if (title == '视频') { 
        router.push({name:'myVideo'})
    }
}

const show1 = ref(false)
const actions = [
      { name: '修改密码', icon: 'exchange' },
      { name: '退出登录', icon: 'revoke' },
];

function onSelect(item) {
    if(item.name == '退出登录') {
        useUserStore().changeLogin('false')
        router.push('/home')
    } else {
        show1.value = false
        showToast('功能暂未开放');
    }
}

</script>


<template>
    <div id="box">
        <div v-if="!useUserStore().isLogin">
            <div class="top-div">
                <van-icon name="list-switch" size="0.3rem" />
                <van-icon name="setting-o" size="0.3rem" />
            </div>

        <div class="unlogin">

            <header class="ul-header">
                <van-button @click="$router.push('/bottomLogin')">登陆</van-button>
                <span>登录后同步收藏、评论、关注</span>
            </header>
            <main>
                <div class="head1">
                    <span>最近</span>
                    <span>文章</span>
                    <span>视频</span>
                    <span>动态</span>
                </div>

                <img style="width: 80%;"
                    src="https://cdn7.axureshop.com/demo2024/1966126/images/%E6%88%91%E7%9A%84_/u827.png" alt="">
            </main>
        </div>
        </div>


        <div ref="loginRef"  @scroll="scrollFn" class="loginClass" v-else >
            <div class="up-div">
                <div ref="topRef" class="top-div">
                <van-icon color="#fff" @click="show1 = true" name="list-switch" size="0.24rem" />
                <img ref="imgRef" hidden  style="height: 0.24rem; border-radius: 50%; margin-left: 0.2rem;" :src="mori" alt="">
                <div style="height: 100%;display: flex;align-items: center;">
                    <div class="posts">+&ensp;发布</div>
                    <van-icon  @click="showShare = true" color="#fff" size="0.24rem" name="share-o" />
                </div>
                </div>
                <header class="ul-header" style="padding: 0.2rem;">
                    <div class="self-info">
                        <img :src="mori" alt="" srcset="">
                        <p>
                            <span style="font-size: 0.2rem; color: #fff;">小然然</span>
                            <span>ID:2162120070</span>
                            <span>IP属地：河南</span>
                        </p>
                    </div>
                    <p style="font-size: 0.14rem; color: #fff;">
                      <span style="color: aliceblue;">个性签名：</span> 
                      不要去走快路，要静下心来感受路
                    </p>
                    <p class="h-bottom">
                        <span class="spn1">
                            <span>8.8万</span>
                            <span>被赞</span>
                        </span>
                        <span class="spn1">
                            <span>2.1万</span>
                            <span>粉丝</span>
                        </span>
                        <span class="spn1">
                            <span>4600</span>
                            <span>关注</span>
                        </span>
                        <span class="spn2">
                            <van-button >编辑资料</van-button>
                            <van-icon color="#f7f7f7" name="setting-o" size="0.24rem" />
                        </span>
                    </p>
                </header>
            </div>
            <div ref="midRef" class="mid">
                <van-tabs style="margin: 0 0.6rem;" v-model:active="active" @click-tab="onClickTab">
                    <van-tab v-for="item in list" :title="item" :key="item"/>
                </van-tabs>
                <van-icon size="0.24rem" class="search" name="search" />
                
            </div>
            <main>
                <router-view/>
            </main>

            <!-- 分析面板 -->
            <van-share-sheet
                v-model:show="showShare"
                title="立即分享给好友"
                :options="options"/>

            <!-- 修改密码和退出登录 -->
            <van-action-sheet v-model:show="show1"   
            description="选择你要进行的操作" 
            cancel-text="取消"
            :actions="actions" @select="onSelect" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.top-div {
    user-select: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 5;
    height: 60px;
    display: flex;
    justify-content: space-between;
    padding: 0 0.14rem;
    align-items: center;
}

.loginClass {
    overflow: auto;
    height: 100vh;
    width: 100vw;
}
.unlogin {
    user-select: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 40px);

    header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.3rem;
        box-sizing: border-box;
        width: 100%;
        background-color: #f7f7f7;
        font-size: 0.14rem;
        flex-direction: column;

        .van-button {
            width: 28vw;
            height: 28vw;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.24rem;
            color: #fff;
            background-color: #f66;
            border-radius: 50%;
            margin-bottom: 0.2rem;
        }
    }

    main {
        flex: 1;
        width: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;

        .head1 {
            height: 0.4rem;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 0.8rem;
            color: #ccc;

            span {
                margin: 0.05rem;
                font-size: 0.14rem;
            }
        }
    }
}
.up-div {
    background-image: url('@/assets/imagesrr.png') ;
    background-size: 100% 100%;
    padding-top: 0.4rem;
    height: 230px;
    box-sizing: border-box;
    .posts {
    background-color: #f66;
    color: #fff;
    text-align: center ;
    margin-right: 0.05rem; 
    height: 0.24rem;
    line-height: 0.24rem; 
    width: 0.48rem;
    border-radius: 0.12rem; 
    font-size: 0.12rem;
    }
    .self-info{
    display: flex;
    align-items: center;
    margin-bottom: 0.1rem;

        img{
        height: 0.8rem;
        border-radius: 0.4rem;
        margin-right: 0.1rem;
        }

        p{
        display: flex;
        flex-direction: column;
        font-size: 0.12rem;
        color: #ccc;

        span{
            margin-bottom: 0.05rem;
        }
        }
    }


    .h-bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.1rem;
        .spn1{
            display: flex;
            font-size: 0.12rem;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #ccc;
        }
        .spn2{
            display: flex;
            align-items: center;
            .van-button{
                margin-right: 0.1rem; 
                height: 0.28rem; 
                width: 1rem; 
                border-radius: 0.14rem;
                font-size: 0.14rem;
                background: none;
                color: #f7f7f7;
            }
        }
    }
}

.mid {
    border-radius: 0.05rem 0.05rem 0 0;
    box-sizing: border-box;
    position: relative;
    width: 100vw;
    background-color: #fff;
    z-index: 10;
    .search{
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
    }
}

#box{
    flex: 1;
}

</style>